<template>
  <div class="not-found">
    <div class="content">
      <div class="head">
        <p class="title">搜索<span class="keywords">“{{ $route.params.keyword }}”</span>的结果</p>
        <img src="~/assets/images/not-found.png" alt="">
        <p class="prompt">很抱歉，平台暂未收录该企业。<br> 您可以联系客服或提交建议，我们会及时邀请入驻。</p>
      </div>

      <!-- //todo 推荐企业没对接接口 -->
      <div class="recommend-company">
        <p class="title">为您推荐以下企业：</p>
        <div class="list">
          <div class="item" v-for="(item, index) in 4" :key="index">
            <img src="~/assets/images/com-icon.png" alt="" class="pic">
            <div class="name">成都星辰科技股份有限公司</div>
            <div class="achieves">
            <span class="certifi">
              <img src="~/assets/images/certifi.png" alt="">
              已认证
            </span>
              <span class="time">
              <img src="~/assets/images/settle.png" alt="">
              入驻五年
            </span>
            
            </div>
          </div>
        </div>
      </div>

      <!-- //todo 推荐产品没对接接口 -->
      <div class="recommend-products">
        <p class="title">为您推荐以下产品：</p>
        <div class="list">
          <div class="item" v-for="(item, index) in 5" :key="index">
            <img src="~/assets/images/com-icon.png" alt="" class="pic">
            <div class="name">包装包装包装包装包装包装包装</div>
            <div class="price-and-collect">
              <div class="price"><span class="keywords">￥3.00/Pc</span>起</div>
              <div class="collect"><img src="~/assets/images/collect-grey.png" alt=""></div>
            </div>
            <div class="storage-and-cart">
              <div class="storage"><span class="keywords">5000 Pcs</span>MOQ</div>
              <div class="cart"><img src="~/assets/images/cart-grey.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotFound',
  data() {
    return {}
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.not-found {
  display: flex;
  justify-content: center;
  background-color: rgb(245, 244, 249);

  .content {
    width: 1200px;
    background-color: #fff;
    padding: 30px;
    font-size: 16px;
    color: #666;

    .head {
      display: flex;
      flex-direction: column;
      align-items: center;

      > .title {
        margin-top: 20px;
        margin-bottom: 50px;
        font-size: 24px;
        font-weight: bold;

        .keywords {
          color: $theme-color-1;
        }
      }

      img {
        margin-bottom: 50px;
      }

      .prompt {
        margin-bottom: 100px;
        color: #969696;
        text-align: center;
        line-height: 28px;
      }
    }

    .recommend-company {
      margin-bottom: 80px;

      > .title {
        font-size: 20px;
        padding: 0 15px;
        border-left: solid 3px #666;
        margin-bottom: 30px;
      }

      .list {
        margin: -10px;

        .item {
          width: calc((100% - 80px)/4);
          padding: 15px;
          background-color: rgb(243, 244, 247);
          margin: 10px;
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;

          &:hover {
            .name {
              color: $theme-color-1;
            }
          }

          .pic {
            width: 100%;
            height: 151px;
            margin-bottom: 15px;
          }

          .name {
            width: 100%;
            height: 42px;
            @include text-omitted(2);
            margin-bottom: 15px;
            text-align: left;
          }

          .achieves {
            width: 100%;
            display: flex;
            align-items: center;

            .certifi {
              display: flex;
              align-items: center;
              margin-right: 45px;

              img {
                margin-right: 10px;
              }
            }

            .time {
              display: flex;
              align-items: center;

              img {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .recommend-products {

      > .title {
        font-size: 20px;
        padding: 0 15px;
        border-left: solid 3px #666;
        margin-bottom: 30px;
      }

      .list {
        margin: -10px;

        .item {
           width: calc((100% - 100px)/5);
          padding: 15px;
          margin: 10px;
          border: solid 1px #eaeaea;
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;

          &:hover {
            .name {
              color: $theme-color-1;
            }
          }

          .pic {
            width: 100%;
            height: 236px;
            margin-bottom: 15px;
          }

          .name {
            width: 100%;
            height: 42px;
            margin-bottom: 15px;
            text-align: left;
            @include text-omitted(2);
          }

          .price-and-collect {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #969696;
            margin-bottom: 10px;

            .price {
              .keywords {
                color: $theme-color-1;
                font-size: 18px;
                font-weight: bold;
                margin-right: 5px;
              }
            }
          }

          .storage-and-cart {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #969696;

            .storage {
              .keywords {
                color: $theme-color-1;
                font-size: 18px;
                font-weight: bold;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
